<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>简单速度动画</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#div1{
		width: 200px;
		height: 200px;
		background: red;
		position: relative;
		left: -200px;
		top: 10px;
	}
	#div1 span{
		width: 20px;
		height: 50px;
		background: blue;
		position: absolute;
		left: 200px;
		top: 75px;

	}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('div1');
		oDiv.onmouseover=function(){
			startMove(0);
		}
		oDiv.onmouseout=function(){
			startMove(-200);
		}
	}

	var timer = null;
	function startMove(iTarget){
		clearInterval(timer);
		var oDiv=document.getElementById('div1');
		var speed=0;
		if(oDiv.offsetLeft<iTarget){
			speed=10;
		}else{
			speed=-10;
		}
		timer=setInterval(function(){
			if (oDiv.offsetLeft==iTarget) {
				clearInterval(timer);
			}else{
				oDiv.style.left=oDiv.offsetLeft+speed+'px';
			}
		},30)
	}

	</script>
</head>
<body>
	<div id="div1">
		<span id="share"><strong>分享</strong></span>		
	</div>
</body>
</html>